<template>
  <div>
    <div v-if="category.children && category.children.length>0">
     <el-divider content-position="left" v-if=""> {{localeCn? category.label : category.labelEn}}</el-divider>
     <div class="child">
        <mybox :category="item" :key="item.id" v-for="item in category.children" class="checkItem"></mybox>
     </div>
    </div>
    <el-radio :label="category.id" v-else>
        {{localeCn? category.label : category.labelEn}}
    </el-radio>
  </div>
</template>

<script>
  export default {
    name:'mybox',
    components: {},
    props: {
      category:[Object]
    },
    computed: {
      },
    data() {
      return {

      }
    },
    created() {
    },
    methods: {
    }
  }
</script>
<style lang="scss" scoped>
  .child{
    margin-left: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    .checkItem{
      margin-right: 20px;
	  margin-bottom: 20px;
    }
  }
  @media (max-width: 767px) {
      @function scale($currentSize) {
        @return calc(#{$currentSize} * #{$global_scale_750});
      }
      .child{
        margin-left: 20px;
        .checkItem{
          margin-right: 10px;
      	  margin-bottom: 10px;
        }
		:deep(.el-radio__label){
			font-size: 12px;
		}
      }
  }
</style>
